<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <h:head>
        <title> Administracion de Usuarios </title>
        <link rel="stylesheet" href="resources/css/style.css" />
        <style type="text/css">
            html{
                height: 100%;
            }
            body{
                height: 80%;
            }
            .ui-layout-north {
                z-index:20 !important;
                overflow:visible !important;;
            }

            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;
            }   
            .ui-layout-unit-content{
                overflow:visible !important;
            }
        </style>

        <script type="text/javascript">
        
            
          /*  $(document).ready(function(){
               $('#idCategoria').change(function() {
                list_value = $(this).val();
                  var nwval = value * list_value;
                 alert("Valor seleccionado:" + nwval); 
            });
          });*/
          
          function mostrarSeleccionado(element){
             var value=$(element).val();
             if(value==3){
                // alert("Valor: " + value);
                 $('#idCategoria').show();
            };
    
              
          }
            
        </script>

    </h:head>
    <br />
    <h:body>

        <p:layout fullPage="true" >  
            <p:layoutUnit position="north" size="100" header="Control de registro de Incidencias" 
                          resizable="false" closable="false" collapsible="false" >  
                
              <!--  <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  

                <p:dialog modal="true" widgetVar="statusDialog" header="Cargando"
                          draggable="false" closable="false"  style="width:1px;height:1px;"> 
                    Espera un momento por favor....
                    <p:graphicImage value="/resources/img/loading3.gif" style="width: 60px; height: 60px"/>  
                </p:dialog>   -->

                <!--Encabezado o Menu Bar que es de Layout -->
                <h:form id="frmMenu">
                    <p:growl id="messages"/>  
                    <p:menubar >   
                        <p:menuitem value="Inicio" url="inicio.xhtml" icon="inicio" />  

                        <p:submenu  label="Administracion" icon="administracion">  
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminUsuario}" value="Usuarios" url="administrarUsuarios.xhtml" icon="usuario"/>  
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminPerfil}" value="Perfiles" url="administrarPerfiles.xhtml" icon="permisos"/>
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminArea}" value="Areas" url="administrarAreas.xhtml" icon="areas"/>
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminCategoria}" value="Categorias" url="administrarCategorias.xhtml" icon="categorias"/>
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminCargo}" value="Cargos" url="administrarCargos.xhtml" icon="cargos"/>
                        </p:submenu>  

                        <p:submenu label="Base de Conocimiento" icon="baseConocimiento" 
                                   rendered="#{loginBean.usuario.perfil.adminBaseConocimiento}">  
                            <p:menuitem value="Soluciones" url="administrarBaseConocimiento.xhtml" icon ="solucion"/>   
                        </p:submenu>

                       <p:submenu label="Incidencias" icon="incidencia"  
                                   rendered="#{loginBean.usuario.perfil.adminIncidencias}">
                             <p:menuitem value="Pendientes:" url="IncidenciasxResolver.xhtml" icon="mio"
                                        rendered="#{loginBean.usuario.perfil.adminIncidencias}"/> 
                            <p:menuitem value="Todas" url="administrarIncidencias.xhtml" icon="problema" 
                                        rendered="#{loginBean.usuario.perfil.adminIncidencias}"/>
                            <p:menuitem value="Asignaciones" url="administrarAsignaciones.xhtml" icon="asociar"
                                        rendered="#{loginBean.usuario.perfil.adminIncidencias}"/> 
                        </p:submenu> 

                        <p:menuitem value="Contraseña" url="#" icon="candado" />  

                        <p:menuitem value="Salir" url="index.jsf" icon="salir" />  
                    </p:menubar>
                    <!--//Cierra Encabezado o Menu Bar que es de Layout -->
                </h:form> 
            </p:layoutUnit>    

            <!--*************************************************************************** -->           
            <!-- Panel central o Contenedor  -->
            <p:layoutUnit position="center" size="1500" style="border-bottom: transparent;
                          border-top: transparent; border-left: transparent; border-right: transparent" >
                <!-- Inicio de scroll panel-->
                <p:scrollPanel style="width:1300px;height:480px" mode="native" > 
                    <h:form>
                        <br/>
                        <!-- Boton para crear un Nuevo Usuario-->
                        <p:commandButton value="Nuevo Usuario" actionListener="#{usuarioBean.preparInsertar()}" 
                                         oncomplete="dlgNuevo.show();"  image="icon-adicionar_usuario"
                                         rendered="#{loginBean.usuario.perfil.crearUsuario}"/>
                    </h:form><br /><br />

                    <!--mostrar Usuarios registrados -->
                    <h:form id="frmUsuarios" >
                        <p:dataTable id="datatable" var="Usuario" value="#{usuarioBean.usuarios}" 
                                     widgetVar="tablaUsuarios"   emptyMessage="Ning&uacute;n Usuario registrado" 
                                     paginatorPosition="bottom" paginator="true" rows="5"  
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                     rowsPerPageTemplate="5,10,15" style="font-size: 12px" >

                            <f:facet name="header">  
                                <p:outputPanel style="alignment-adjust: ">  
                                    <h:outputText value="Search all fields:" />  
                                    <p:inputText id="globalFilter" onkeyup="tablaUsuarios.filter()"
                                                 style="width:150px" />  
                                </p:outputPanel>  
                            </f:facet>  

                            <p:column headerText="Identificaci&oacute;n" filterBy="#{Usuario.identificacion}"  >  
                                <h:outputText value="#{Usuario.identificacion}" />  
                            </p:column>  

                            <p:column headerText="Nombre Usuario" filterBy="#{Usuario.login}"  >  
                                <h:outputText value="#{Usuario.login}"  />  
                            </p:column>  

                            <p:column headerText="Nombres" filterBy="#{Usuario.nombres}">  
                                <h:outputText value="#{Usuario.nombres}" />  
                            </p:column>  

                            <p:column headerText="Apellidos" filterBy="#{Usuario.apellidos}">  
                                <h:outputText value="#{Usuario.apellidos}" />  
                            </p:column> 

                            <p:column headerText="M&oacute;vil" >  
                                <h:outputText value="#{Usuario.numCelular}" />  
                            </p:column>  

                            <p:column headerText="E-mail">  
                                <h:outputText value="#{Usuario.EMail}" />  
                            </p:column>  

                            <p:column headerText="Estado" width="40">  
                                <h:outputText value="#{Usuario.estado}" />  
                            </p:column>  

                            <p:column headerText="Area">  
                                <h:outputText value="#{Usuario.area.nombre}" />  
                            </p:column>  

                            <p:column headerText="Cargo">  
                                <h:outputText value="#{Usuario.cargo.nombre}" />  
                            </p:column>  

                            <p:column headerText="Perfil">  
                                <h:outputText value="#{Usuario.perfil.nombre}" />  
                            </p:column>  

                            <p:column style="width:8%; text-align: center " headerText="Config">  
                                <p:commandButton title="Editar" update=":frmEditar" oncomplete="dlgEditar.show();"
                                                 actionListener="#{usuarioBean.prepararActualizar(Usuario.codUsuario)}" 
                                                 image="editar" rendered="#{loginBean.usuario.perfil.editarUsuario}"/>  
                                <p:commandButton  title="Eliminar" update=":frmEliminar" oncomplete="dlgEliminar.show();" 
                                                  actionListener="#{usuarioBean.prepararEliminar(Usuario.codUsuario)}" 
                                                  image="eliminar" rendered="#{loginBean.usuario.perfil.eliminarUsuario}"/>  
                            </p:column>     

                        </p:dataTable>  
                    </h:form>
                    <!--//cierre form para mostrar Usuarios registrados -->

                    <!-- Es necesario el Scrollpanel para ver todos los usuarios registrados si se quiere
                         paginar por cantidades mayores a 5.--> 
                </p:scrollPanel> 
            </p:layoutUnit>  


            <!--Layout bottom -->
            <p:layoutUnit position="south" size="70" header="" resizable="false" closable="false" collapsible="false" 
                          style="text-align:center; font-size: 12px;" > 
                <h:outputText value="Sistema Control de Reporte de Incidencias" /> <br /> 
                <h:outputText value="Corporaci&oacute;n universitaria Minuto de Dios" />  <br />
                <h:outputText value="Desarrollado por: Yinna Martinez y Diego Babativa - Licencia GPL" /><br />
            </p:layoutUnit>

            <p:layoutUnit position="west" size="200" header="Bienvenido" resizable="true"
                          closable="false" collapsible="true"> 
                <h:form>  
                    <p:growl id="growl" showDetail="true" />  
                    <h:panelGrid columns="1" cellpadding="10">  
                        <p:graphicImage value="resources/fotos/#{loginBean.usuario.foto}" width="170"/>
                        <h:outputLabel style=" font-size: 14px; color: blue" 
                                       value="Usuario: #{loginBean.usuario.login}"/>

                        <h:outputText style="font: bold; font-size: 12px" value="
                                      E-mail: #{loginBean.usuario.EMail}"/>

                        <h:outputText style="font: bold; font-size: 14px" value="
                                      Area: #{loginBean.usuario.area.nombre}"/>

                        <h:outputText style="font: bold; font-size: 14px" value="
                                      Perfil: #{loginBean.usuario.perfil.nombre}"/>

                        <h:outputText style="font: bold; font-size: 14px" value="
                                      Cargo: #{loginBean.usuario.cargo.nombre}"/>

                        <h:outputText style="font: bold; font-size: 14px" value="
                                      Movil: #{loginBean.usuario.numCelular}"/>

                    </h:panelGrid>   
                </h:form>  
            </p:layoutUnit> 
        </p:layout>  


        <!-- *****************************ES PARA NO BLOQUEAR LA PANTALLA p:DIALOG FUERA DEL LAYOUT***************** -->

        <!--Formulario para ingresar Nuevos Usuarios  -->
        <h:form id="frmNuevo" enctype="multipart/form-data" style="font-size: 13px">
            <p:dialog header="Nuevo Usuario" widgetVar="dlgNuevo" 
                      resizable="false" id="dlgNuevo" modal="true" >
                <p:growl id="growlNuevo" showDetail="true" sticky="true"  /> <!-- Este es un mensaje modal para 
                  confirmar la creación del usuario.-->

                <h:outputText style="font-weight: bold" value="Datos de Inicio de Sessi&oacute;n" /><br /><br />
                <h:outputText value="Nombre de Usuario" />&nbsp;
                <p:inputText value="#{usuarioBean.usuario.login}" style="width: 200px" required="true" 
                             requiredMessage="Nombre de Usuario vacio"
                             validatorMessage="Nombre de usuario: Solo permite Letras">
                        <f:validateRegex pattern="[a-zA-Z]+" />
                </p:inputText>    
                    &nbsp;
                <h:outputText value="Contraseña" />&nbsp;
                <h:inputSecret value="#{usuarioBean.usuario.password}"   
                               id="password" required="true" label="Contraseña" 
                               requiredMessage="Debe asignar una Contraseña" style="width: 200px"
                               validatorMessage="Contraseña debe tener minimo 6 Caracteres">
                    <f:validateLength minimum="6" />
                </h:inputSecret>    
                <p:separator />

                <h:outputText style="font-weight: bold" value="Datos Personales de Usuario" /><br /><br />
                <h:panelGrid id="pgNuevo" columns="2" cellpadding="4" >  

                    <h:outputText value="Identificaci&oacute;n" style="padding-left: -10px"/>  
                    <h:outputText value="Nombres" style="padding-left: 20px"/>  
                    <p:inputText value="#{usuarioBean.usuario.identificacion}" style="width: 200px" 
                                 required="true" requiredMessage="Identificacion vacia" >
                    </p:inputText>
                    <p:inputText value="#{usuarioBean.usuario.nombres}" style="width: 200px" 
                                 required="true" requiredMessage="Debe Ingresar Nombres"
                                 validatorMessage="Nombres: Solo permite Letras">
                        <!-- <f:validateRegex pattern="[a-zA-Z]+" />-->
                    </p:inputText>
                    <h:outputText value="Apellidos" /> 
                    <h:outputText value="Numero celular" />  
                    <p:inputText value="#{usuarioBean.usuario.apellidos}" style="width: 200px" required="true" 
                                 requiredMessage="Debe Ingresar Apellidos"
                                 validatorMessage="Apellidos: Solo permite Letras">
                       <!-- <f:validateRegex pattern="[a-zA-Z]+" /> -->
                    </p:inputText>   
                    <p:inputText value="#{usuarioBean.usuario.numCelular}" style="width: 200px" 
                                 requiredMessage="Debe Ingresar Numero de Celular" required="true" 
                                 id="celular" validatorMessage="Numero de celular debe tener 10 digitos">
                        <f:validateLength minimum="10" maximum="10"/>
                    </p:inputText>

                    <h:outputText value="E-mail" /> 
                    <h:outputText value="Perfil" />
                    <p:inputText value="#{usuarioBean.usuario.EMail}" style="width: 200px" required="true"
                                 validatorMessage="Email no v&aacute;lido" requiredMessage="Se necesita registrar un E-mail">
                        <f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                    </p:inputText>            
                    <p:selectOneMenu value="#{usuarioBean.idPerfil}" required="true" 
                                     requiredMessage="Debe Seleccionar un Perfil" onchange="mostrarSeleccionado(this);">
                        <f:selectItem itemLabel=" - Seleccionar un Pefil - "  itemValue=""  />
                        <f:selectItems value="#{perfilBean.perfiles}"  var="perfil" 
                                       itemLabel="#{perfil.nombre}"  itemValue="#{perfil.codPerfil}" /> 
                    </p:selectOneMenu>
                    
                    <h:outputText value="Area" />
                    <h:outputText value="Cargo" />
                    <p:selectOneMenu value="#{usuarioBean.idArea}" required="true" 
                                     requiredMessage="Debe Seleccionar un Area">
                        <f:selectItem itemLabel=" - Seleccionar un Area - "  itemValue=""  />
                        <f:selectItems value="#{areaBean.areas}"  var="area"
                                       itemLabel="#{area.nombre}" itemValue="#{area.codArea}"/>
                    </p:selectOneMenu>
                    <p:selectOneMenu value="#{usuarioBean.idCargo}" required="true" 
                                     requiredMessage="Debe Seleccionar un Cargo">
                        <f:selectItem itemLabel=" - Seleccionar un Area - "  itemValue=""  />
                        <f:selectItems value="#{cargoBean.cargos}"  var="cargo"
                                       itemLabel="#{cargo.nombre}" itemValue="#{cargo.codCargo}"/>
                    </p:selectOneMenu>
                    
                </h:panelGrid> 
                
                <h:outputText value="Tu foto" />
                <p:fileUpload fileUploadListener="#{usuarioBean.upload}"
                                  required="true" requiredMessage="Debe seleccionar una imagen"
                                  allowTypes="/(\.|\/)(gif|jpe?g|png)$/" sizeLimit="100000"
                                  invalidFileMessage="fichero inválido" invalidSizeMessage="ha excedido el tamaño máximo permitido"
                                  label="Seleccionar imagen" cancelLabel="Cancelar" uploadLabel="Subir"/>
                    
                <p:separator />
                <p:commandButton value="&nbsp;Guardar" update=":frmUsuarios:datatable, growlNuevo, dlgNuevo" oncomplete="dlgNuevo.hide()" 
                                 image="icon-guardar" actionListener="#{usuarioBean.insertar()}"/>  
                <p:commandButton value="&nbsp;Cancelar" update=":frmUsuarios" oncomplete="dlgNuevo.hide()" 
                                 image="icon-cancelar" />  
            </p:dialog>
        </h:form>
        <!--//Cierre ingresar nuevos Usuarios  -->


        <!--Form  Editar Usuarios  -->
        <h:form id="frmEditar">
            <p:dialog header="Actualizar Usuario" widgetVar="dlgEditar" resizable="false" id="dlgEditar" 
                      modal="true"  >
                <p:growl id="growlEditar" sticky="true" /> 

                <p:panelGrid id="pgEditarEncabezado">
                    <f:facet name="header">
                        <p:row>
                            <p:column>
                            <h:outputText value="Informacion de Ingreso" />
                            </p:column>
                        </p:row>
                    </f:facet>
                    <p:row>
                        <p:column>
                            <h:outputText value="Nombre de Usuario" style="font-size: 10px"></h:outputText><br />
                         <p:inputText value="#{usuarioBean.usuario.login}" style="width: 200px" required="true" 
                                         requiredMessage="Debe tener un nombre de Login" /><br /><br />
                            <h:outputText value="Estado" style="font-size: 10px"></h:outputText><br />
                         <p:selectOneMenu value="#{usuarioBean.usuario.estado}">
                        <f:selectItem itemLabel="Habilitado" itemValue="true" />
                        <f:selectItem itemLabel="Deshabilitado" itemValue="false" />
                    </p:selectOneMenu><br /><br />
                             <h:outputText value="Desea cambiar la foto ?" style="font-size: 10px"></h:outputText><br />
                            <p:fileUpload fileUploadListener="#{usuarioBean.upload}"
                                  required="true" requiredMessage="Debe seleccionar una imagen"
                                  allowTypes="/(\.|\/)(gif|jpe?g|png)$/" sizeLimit="100000"
                                  invalidFileMessage="fichero inválido" invalidSizeMessage="ha excedido el tamaño máximo permitido"
                                  label="Seleccionar imagen" cancelLabel="Cancelar" uploadLabel="Subir" 
                                  style="font-size: 10px"/>
                        </p:column>
                        <p:column>
                            <p:graphicImage value="resources/fotos/#{usuarioBean.usuario.foto}" 
                                            width="150" height="150" />
                        </p:column>
                        <br />
                    </p:row>
                </p:panelGrid>

                <p:separator />

                <h:outputText value="Datos Personales de Usuario" /><br /><br />          
                <h:panelGrid id="pgEditar" columns="2" cellpadding="4" >  

                    <h:outputText value="Identificaci&oacute;n" style="padding-left: -10px"/>  
                    <h:outputText value="Nombres" style="padding-left: 20px"/>  
                    <p:inputText value="#{usuarioBean.usuario.identificacion}" style="width: 200px" 
                                 required="true" requiredMessage="Identificacion vacia" />
                    <p:inputText value="#{usuarioBean.usuario.nombres}" style="width: 200px" 
                                 required="true" requiredMessage="Debe Ingresar Nombres" />


                    <h:outputText value="Apellidos" /> 
                    <h:outputText value="Numero celular" />  
                    <p:inputText value="#{usuarioBean.usuario.apellidos}" style="width: 200px"
                                 required="true" requiredMessage="Debe Ingresar Apellidos"/>
                    <p:inputText value="#{usuarioBean.usuario.numCelular}" style="width: 200px" 
                                 requiredMessage="Debe Ingresar Numero de Celular" />

                    <h:outputText value="e-mail" /> 
                    <h:outputText value="Perfil" />
                    <p:inputText value="#{usuarioBean.usuario.EMail}" style="width: 200px" />
                    <p:selectOneMenu value="#{usuarioBean.idPerfil}" effect="fold" 
                                     required="true" requiredMessage="Seleccione un Perfil" >
                        <f:selectItem itemLabel="#{usuarioBean.usuario.perfil.nombre}"  
                                      itemValue="#{usuarioBean.usuario.perfil.codPerfil}"  />
                        <f:selectItems value="#{perfilBean.perfiles}" var="perfil"
                                       itemLabel="#{perfil.nombre}" itemValue="#{perfil.codPerfil}" 
                                       />
                    </p:selectOneMenu>  

                    <h:outputText value="Area" /> 
                    <h:outputText value="Cargo" />
                    <p:selectOneMenu value="#{usuarioBean.idArea}" required="true" requiredMessage="Debe Seleccionar un Area">
                        <f:selectItem itemLabel="#{usuarioBean.usuario.area.nombre}"  
                                      itemValue="#{usuarioBean.usuario.area.codArea}"  />
                        <f:selectItems value="#{areaBean.areas}"  var="area"
                                       itemLabel="#{area.nombre}" itemValue="#{area.codArea}"/>
                    </p:selectOneMenu>
                    <p:selectOneMenu value="#{usuarioBean.idCargo}" required="true" requiredMessage="Debe Seleccionar un Cargo">
                        <f:selectItem itemLabel="#{usuarioBean.usuario.cargo.nombre}" 
                                      itemValue="#{usuarioBean.usuario.cargo.codCargo}"  />
                        <f:selectItems value="#{cargoBean.cargos}"  var="cargo"
                                       itemLabel="#{cargo.nombre}" itemValue="#{cargo.codCargo}"/>
                    </p:selectOneMenu>
                </h:panelGrid> 

                <p:separator />
                <p:commandButton value="&nbsp;Actualizar" update=":frmUsuarios:datatable, growlEditar, dlgEditar" 
                                 actionListener="#{usuarioBean.actualizar()}" oncomplete="dlgEditar.hide()" 
                                 image="icon-guardar" />  
                <p:commandButton value="&nbsp;cancelar" update=":frmUsuarios:datatable" oncomplete="dlgEditar.hide()" 
                                 image="icon-cancelar" />  
            </p:dialog>  
        </h:form>

        <!--Form  eliminar Usuario  -->
        <h:form id="frmEliminar">  
            <p:growl id="growlEliminar" sticky="true" />  
            <p:confirmDialog id="dlgEliminar" message="¿Est&aacute; seguro de eliminar el Usuario?"  
                             header="Eliminar Usuario" severity="alert" widgetVar="dlgEliminar"  >  
                <p:commandButton value="&nbsp;Eliminar" update=":frmUsuarios:datatable, growlEliminar, dlgEliminar" 
                                 oncomplete="dlgEliminar.hide()" 
                                 actionListener="#{usuarioBean.eliminar()}" image="icon-guardar"  />  
                <p:commandButton value="&nbsp;cancelar" update=":frmUsuarios:datatable" oncomplete="dlgEliminar.hide()" 
                                 image="icon-cancelar" />   
            </p:confirmDialog>  
        </h:form>  
        <!--Cierre Form  eliminar Usuario  -->
    </h:body>        
</html>  







